<!-- 出口放箱历史记录 -->
<template>
  <div class="drop-box-history" v-loading="loadingView"
      element-loading-text="正在加载..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.1)">
    <!-- 查询 -->
    <el-row :gutter="15">
      <el-col :span="24">
        <div style="margin-left: 20px;">
          <el-link type="primary" href="http://101.89.161.32:9200/" target="_blank">中海</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://www.chinasailing.com.cn/bkplan" target="_blank">航华</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://cloud.easipass.com/ols/home.do#" target="_blank">亿通网</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://service.chinaconcord.com:8080/ShippingAgency/PrePlan/PrePlanQuery?TEMPDATAID=E0000D630MZSBM6XB" target="_blank">中和</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://www.hmm21.com/cms/business/ebiz/trackTrace/trackTrace/index.jsp" target="_blank">现代</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://202.136.213.238:8080/ShipSuiteWeb/bi/index.htm" target="_blank">海华</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://op.jjshipping.cn/sheir/index-nav.jsp?tdsourcetag=s_pcqq_aiomsg" target="_blank">锦诚</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://sun-dial.com/sundial/control/query" target="_blank">顺德</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://www.newseas-agent.com/jsFrame/websites/EtrSelect.jsp" target="_blank">新海</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://www.cma-cgm.com/" target="_blank">达飞</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://elines.coscoshipping.com/ebusiness/" target="_blank">中远</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://www.sinoagentsh.com/Query/Expdo.aspx" target="_blank">外运</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://www.penavico.sh.cn/proxy/proxy_query.jsp?tab=tab-2#" target="_blank">外代</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://61.181.252.146:10091/html/swpt/index" target="_blank">振华</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://www.unisco.com.cn/" target="_blank">联合</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://q.cpsa.net.cn/ckfxcdcx" target="_blank">华港</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://www.chinasailing.com.cn/?tdsourcetag=s_pcqq_aiomsg" target="_blank">航华登录</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://web.lindomsc.com/login.aspx" target="_blank">联东</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://e-sinotrans.sinotrans.com/services/login.action" target="_blank">外运放箱网</el-link>
        </div>
        <el-form :model="Data" size="mini" :inline="true" class="demo-form-inline">
          <div>
          <el-form-item>
            <el-date-picker v-model="Data.applyDate" unlink-panels style="width: 210px;" type="daterange" @change="applyDateChange"  value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-select v-model="Data.shipAgencyName" @change="shipAgencyNameChange" @clear="clearContent" clearable filterable placeholder="船代选择">
              <el-option
                v-for="item in shipAgencyNameOptions"
                :key="item.zjm"
                :label="item.zjm"
                :value="item.shipAgencyId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="Data.company" @change="companyChange" @clear="clearContent" clearable filterable placeholder="船公司选择">
              <el-option
                v-for="item in chuangongshiOptions"
                :key="item.nameCncode"
                :label="item.nameCncode"
                :value="item.boatComId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="Data.customerName" @change="custormerChange" @clear="clearContent" filterable clearable placeholder="用箱人选择">
              <el-option
                v-for="item in customerNameOptions"
                :key="item.FullName"
                :label="item.search"
                :value="item.UserId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="Data.theOperatorId" @change="salesmanChange" @clear="clearContent" filterable clearable placeholder="业务员选择">
              <el-option
                v-for="item in salesmanOptions"
                :key="item.fullName"
                :label="item.fullName"
                :value="item.salesmanId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="Data.putBoxPartId" @change="putBoxPartChange" @clear="clearContent" filterable clearable placeholder="放箱员选择">
              <el-option
                v-for="item in putBoxPartOptions"
                :key="item.fullName"
                :label="item.fullName"
                :value="item.salesmanId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="Data.boxState" @change="searOneSeach()" placeholder="状态选择">
              <el-option value="-1" label="全部显示"></el-option>
              <el-option value="2" label="已完成"></el-option>
              <el-option value="16" label="已对单"></el-option>
              <el-option value="7" label="退关"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="Data.putBoxNote" placeholder="请输入放箱备注"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="Data.blno" placeholder="请输入提单号"></el-input>
          </el-form-item>
          <el-button type="primary" size="mini" icon="el-icon-search" @click="searOneSeach"></el-button>
          <el-button size="mini" @click="clearSeach">清空</el-button>
          </div>
          <div style="padding-bottom: 5px;">
          <el-button size="mini" type="warning" @click="setDetails">设置费用</el-button>
          <el-button size="mini" type="danger" @click="opMatchOrder(16)">对单</el-button>
          <el-button size="mini" type="warning" @click="opMatchOrder(0)">回退</el-button>
          <el-button size="mini" type="success" @click="opMatchOrder(7)">退关</el-button>
          <el-button size="mini" type="primary" @click="getEirInfo">获取EIR</el-button>
          <el-button size="mini" type="primary" @click="changeOrder">派单</el-button>
          <el-button size="mini" type="primary" @click="eirCarTo">EIR派车</el-button>
          <el-button size="mini" v-if="userType === '7'" type="primary" @click="completeReviewClick">完成审核</el-button>
          <el-dialog :append-to-body="true" width="300px" title="回退" :visible.sync="shutOutView">
            确定回退吗？
            <div slot="footer" class="dialog-footer">
              <el-button @click="shutOutView = false">取 消</el-button>
              <el-button type="primary" @click="shutOutClick()">确 定</el-button>
            </div>
          </el-dialog>
          <el-dialog :append-to-body="true" width="800px" title="Eir派车记录" :visible.sync="EirToCarView">
            <!-- 表格 -->
            <el-table border :data="carInfoEirArr" style="width: 100%" height="480px">
              <el-table-column align="center" label="添加时间" width="160">
                <template slot-scope="scope">{{scope.row.createTime}}</template>
              </el-table-column>
              <el-table-column align="center" label="EIR号" width="160">
                <template slot-scope="scope">{{scope.row.eirNo}}</template>
              </el-table-column>
              <el-table-column align="center" label="派单对象" width="150">
                <template slot-scope="scope">{{scope.row.dispatchObject}}</template>
              </el-table-column>
              <el-table-column align="center" label="派单状态">
                <template slot-scope="scope">
                  <div v-if="scope.row.dispatchState === '0'">
                    <el-button
                      size="mini"
                      type="danger"
                      @click="dispatchWithdraw(scope.row)">撤回</el-button>
                    <el-button
                      size="mini"
                      type="primary"
                      @click="sendDriverViewOpen(scope.row)">派司机</el-button>
                  </div>
                  <div v-else>
                    已撤回
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="历史详情">
                <template slot-scope="scope">
                  <el-button
                        size="mini"
                        type="primary"
                        @click="driverHistoryViewClick(scope.row)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- <div slot="footer" class="dialog-footer">
              <el-button @click="EirToCarView = false">取 消</el-button>
            </div> -->
          </el-dialog>
          <el-dialog :append-to-body="true" width="648px" title="查看" :visible.sync="sendLookInfoView">
            <!-- 表格 -->
            <el-table border :data="sendLookInfoArr" style="width: 100%">
              <el-table-column align="center" label="车牌号" prop="plateNo" width="150">
              </el-table-column>
              <el-table-column align="center" label="司机姓名" prop="driverName" width="100">
              </el-table-column>
              <el-table-column align="center" label="司机手机号" prop="driverTel" width="200">
              </el-table-column>
              <el-table-column align="center" label="派车时间" prop="sendTime">
              </el-table-column>
              <el-table-column align="center" label="做箱时间" prop="createTime">
              </el-table-column>
              <el-table-column align="center" label="EIR编号" prop="receiptNo">
              </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
              <el-button @click="sendLookInfoView = false">取 消</el-button>
            </div>
          </el-dialog>
          <el-dialog :append-to-body="true" width="648px" title="派司机" :visible.sync="sendDriverView">
            <!-- 表格 -->
            <el-table border :data="carInfoEirToArr" @cell-click="sendDriverCellClick" style="width: 100%">
              <el-table-column align="center" label="EIR编号" width="200">
                <template slot-scope="scope">
                  <el-select v-model="eirNoAlone" placeholder="EIR编号选择">
                    <el-option
                      v-for="item in scope.row.eirNo"
                      :key="item.receiptNo"
                      :label="item.receiptNo"
                      :value="item.receiptNo"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column align="center" label="箱型" width="100">
                <template slot-scope="scope">{{scope.row.type}}</template>
              </el-table-column>
              <el-table-column align="center" label="承运人" width="200">
                <template slot-scope="scope">
                  {{carrierForm.carrier}}
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button
                        size="mini"
                        type="primary"
                        @click="sendDanSure(scope.row)">派单</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
              <el-button @click="sendDriverView = false">取 消</el-button>
            </div>
          </el-dialog>
          <el-dialog :append-to-body="true" width="300px" title="输入承运人信息" :visible.sync="carrierFormView">
            <el-form :model="carrierForm" size="mini" :inline="true">
              <el-form-item label="承运人：">
                <el-input v-model="carrierForm.carrier"></el-input>
              </el-form-item>
              <el-form-item label="手机号：">
                <el-input v-model="carrierForm.phone"></el-input>
              </el-form-item>
              <el-form-item label="车牌号：">
                <el-input v-model="carrierForm.licenseplatenumber"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="carrierFormFlase">取 消</el-button>
              <el-button type="primary" @click="carrierFormView = false">确 定</el-button>
            </div>
          </el-dialog>
          <!-- <el-dialog width="600px" class top="6vh" title="EIR获取" :visible="eirInfoVisible" @close="closeEir">
            <el-form size="mini">
              <el-form-item label="船代：">
                <el-input disabled v-model="eirShip" placeholder="船代不能为空"></el-input>
              </el-form-item>
              <el-form-item label="船公司：">
                <el-select size="mini" v-model="eirCompany" filterable placeholder="请输入船公司" @change="modShipComChange">
                  <el-option
                    v-for="item in shipBoatEirAndList"
                    :key="item.nameCncode"
                    :label="item.nameCncode"
                    :value="item.boatComId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="info" @click="this.eirInfoVisible = false" size="mini">关 闭</el-button>
              <el-button type="primary" @click="getEirClick" size="mini">确 定</el-button>
            </div>
          </el-dialog> -->

          <el-button v-if="userType === '7'" type="primary" size="mini" @click="viewStatistics">查看统计</el-button>
          <el-button v-else type="primary" size="mini" @click="viewStatistics">查看统计</el-button>
          <el-button v-if="userType === '7'" type="primary" size="mini" @click="exportDataClick">日账单</el-button>
          <el-button type="primary" size="mini" @click="exportDataClickAll">导出</el-button>
          <el-button type="primary" size="mini" @click="exportDataClickAllSetting">导出设置</el-button>
          <el-button type="primary" size="mini" @click="codOrderClick">复制下单</el-button>
          <el-button v-if="userType === '7'" type="success" class="icon icon-locking" @click="lockUnlock(1)"></el-button>
          <el-button v-if="userType === '7'" type="warning" class="icon icon-unlock" @click="lockUnlock(0)"></el-button>
          <el-button type="primary" size="mini" @click="tableSetting">列表设置</el-button>
          <el-dialog width="600px" class top="6vh" title="查看统计" :visible="viewStatisticsVisible" @close="close">
            <div style="margin-top: 5px; font-size: medium;">共【{{total}}】单</div>
            <span style="font-size: 16px;">费用</span>
            <div style="font-size: medium;">
              <span>【提箱费：{{statisticsData.suitcaseFee}}】</span>
              <span>【打单费：{{statisticsData.singleFee}}】</span>
              <span>【服务费：{{statisticsData.serviceFee}}】</span>
              <span>【安保费：{{statisticsData.securityFee}}】</span>
              <span>【超期费：{{statisticsData.containerFee}}】</span>
              <span>【其他费：{{statisticsData.restFee}}】</span>
            </div>
            <span style="font-size: 16px;">船代费用</span>
            <div style="font-size: medium;">
              <span>【提箱费：{{statisticsData.shipSuitcaseFee}}】</span>
              <span>【打单费：{{statisticsData.shipSingleFee}}】</span>
              <span>【服务费：{{statisticsData.shipServiceFee}}】</span>
              <span>【安保费：{{statisticsData.shipSecurityFee}}】</span>
              <span>【超期费：{{statisticsData.shipContainerFee}}】</span>
              <span>【其他费：{{statisticsData.shipRestFee}}】</span>
            </div>
            <div style="margin-top: 5px; font-size: medium;">
              <span>【合计收入：{{statisticsData.totalRevenue}}】</span>
              <span>【合计支出：{{statisticsData.totalSpend}}】</span>
              <span>【利润：{{statisticsData.profits}}】</span>
            </div>
            <div style="margin-top: 5px; font-size: medium;">
              <span>【箱量合计：{{sunNum}}】</span>
              <span v-for="item in statisticsType">【{{item.type}}：{{item.num}}】</span>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button type="info" @click="close" size="mini">关 闭</el-button>
            </div>
          </el-dialog>
          <el-dialog width="600px" class top="6vh" title="查看统计" :visible="viewStatisticsTVisible" @close="closeT">
            <div style="margin-top: 5px; font-size: medium;">共【{{total}}】单</div>
            <span style="font-size: 16px;">船代费用</span>
            <div style="font-size: medium;">
              <span>【提箱费：{{statisticsData.shipSuitcaseFee}}】</span>
              <span>【打单费：{{statisticsData.shipSingleFee}}】</span>
              <span>【服务费：{{statisticsData.shipServiceFee}}】</span>
              <span>【安保费：{{statisticsData.shipSecurityFee}}】</span>
              <span>【超期费：{{statisticsData.shipContainerFee}}】</span>
              <span>【其他费：{{statisticsData.shipRestFee}}】</span>
            </div>
            <div style="margin-top: 5px; font-size: medium;">
              <span>【箱量合计：{{sunNum}}】</span>
              <span v-for="item in statisticsType">【{{item.type}}：{{item.num}}】</span>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button type="info" @click="closeT" size="mini">关 闭</el-button>
            </div>
          </el-dialog>
          </div>
          <!-- <el-form-item label="业务员">
            <el-input v-model="Data.theOperatorId"></el-input>
          </el-form-item> -->
        </el-form>
      </el-col>

    </el-row>
    <!-- 表格 -->
    <el-table :cell-style="tableRowClass" :height="tableHeight" highlight-current-row :row-class-name="tableRowClassName" @cell-click="setmySales" @cell-dblclick="dbTableClick" :data="tableData" border @selection-change="handleSelectionChange">
      <el-table-column align="center" type="selection" width="35">
      </el-table-column>
      <el-table-column v-for="item in myfieldList" :prop="item.props" :key="item.id" :width="item.width" :label="item.field">
        <template slot-scope="scope">
          <div v-if="item.props === 'clientName'">
            <el-popover
              placement="right"
              width="200"
              trigger="click">
              <div>
                <h4 style="display: inline-block; font: bold">联系方式:</h4> {{scope.row.userInfo[0].mobile2}}
              </div>
              <div>
                <h4 style="display: inline-block; font: bold">电话:</h4> {{scope.row.userInfo[0].phone1}}
              </div>
              <div>
                <h4 style="display: inline-block; font: bold">手机:</h4> {{scope.row.userInfo[0].mobile1}}
              </div>
              <div>
                <h4 style="display: inline-block; font: bold">QQ:</h4> {{scope.row.userInfo[0].qq}}
              </div>
              <div>
                <h4 style="display: inline-block; font: bold">传真:</h4> {{scope.row.userInfo[0].fax}}
              </div>
              <div>
                <h4 style="display: inline-block; font: bold">地址:</h4> {{scope.row.userInfo[0].address}}
              </div>
              <el-button style="padding: 0px; color: #606266;" type="text" slot="reference">{{scope.row.clientName}}</el-button>
            </el-popover>
          </div>
          <div v-else-if="item.props === 'mome'">
            <el-popover
            placement="top"
            width="300"
            trigger="click">
            <div>
              <h4 style="display: inline-block; font: bold"> {{scope.row.mome}}</h4>
            </div>
            <el-button style="padding: 0px; color: #606266; overflow: hidden; white-space:nowrap;" type="text" slot="reference">{{scope.row.mome}}</el-button>
          </el-popover>
          </div>
          <div v-else-if="item.props === 'putBoxNote'">
            <div style="overflow: hidden; white-space:nowrap;">{{scope.row.putBoxNote}}</div>
          </div>
          <div v-else-if="item.props === 'sumMoney'">
            <el-popover
              placement="right"
              width="200"
              trigger="click">
              <el-table :data="scope.row.feedata">
                <el-table-column width="100" property="feeName" label="费用"></el-table-column>
                <el-table-column width="100" property="money" label="金额"></el-table-column>
              </el-table>
              <el-button style="padding: 0px; color: #606266" type="text" slot="reference">{{scope.row.sumMoney}}</el-button>
            </el-popover>
          </div>
          <div v-else-if="item.props === 'shipAgencyFee'">
            <el-popover
              placement="right"
              width="200"
              trigger="click">
              <el-table :data="scope.row.shipFee">
                <el-table-column width="100" property="feeName" label="费用"></el-table-column>
                <el-table-column width="100" property="money" label="金额"></el-table-column>
              </el-table>
              <el-button style="padding: 0px; color: #606266" type="text" slot="reference">{{scope.row.shipAgencyFee}}</el-button>
            </el-popover>
          </div>
          <div v-else-if="item.props === 'eirNo'">
            <div v-if="scope.row.eirNo.length > 1">
              <el-popover placement="left" width="200" trigger="click">
                <div style="font: 15px bold; margin-top: 5px;" v-for="item in scope.row.eirNo">
                  {{item.receiptNo}}
                </div>
                <el-button style="padding: 0px; color: #606266" type="text" slot="reference">{{scope.row.eirNo.length}}个eirNo</el-button>
              </el-popover>
            </div>
            <div v-else-if="scope.row.eirNo.length === 1">
              {{scope.row.eirNo[0].receiptNo}}
            </div>
          </div>
          <div v-else>
            {{tableData[scope.$index][item.props]}}
          </div>
        </template>
      </el-table-column>
      <el-table-column width="60px" align="center" label="操作">
        <template slot-scope="scope">
          <el-popover
            v-if="scope.row.putBoxFileList.length != 0"
            placement="left"
            width="100"
            trigger="click">
            <div v-for="item in scope.row.putBoxFileList">
              <el-button icon="el-icon-s-order" type="primary" size="mini" @click="lookFiles(item)"></el-button>
              <el-dialog :append-to-body="true" width="800px" title="查看上传文件" :visible.sync="filesView">
                <embed :src="filesImg" type="application/pdf" width="100%" height="600px">
                <div slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="filesView = false">关 闭</el-button>
                </div>
              </el-dialog>
              <el-dialog :append-to-body="true" width="800px" title="查看上传文件" :visible.sync="filesImgView">
                <!-- <embed :src="filesImg" type="application/pdf" width="100%" height="600px"> -->
                <img :src="filesImgSrc" alt="">
                <div slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="filesImgView = false">关 闭</el-button>
                </div>
              </el-dialog>
              <el-button icon="el-icon-delete" type="danger" size="mini" @click="dargerFiles(item)"></el-button>
            </div>
            <el-button slot="reference" style="padding: 0px;" type="primary" size="small" icon="el-icon-s-order"></el-button>
          </el-popover>
          <el-upload style="display: inline-block;" action="http://fx.api.ypt56.net/api/uploadFile" :show-file-list="false" :data="uploadData" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">
            <el-button style="padding: 0px;" type="primary" size="small" icon="el-icon-upload" @click="uploadFiles(scope.$index, scope.row)" ></el-button>
          </el-upload>
        </template>
      </el-table-column>
    </el-table>
    <el-popover placement="top" ref="operationPopover" v-model="showPopover">
      <el-input v-if="modStatus === 1" type="textarea" style="width: 380px" filterable v-model="modPutBoxNote" placeholder="请输入放箱备注" ></el-input>
      <el-select v-if="modStatus === 2" @change="yardChange" style="width: 160px" v-model="modYard" filterable placeholder="请输入提箱点">
        <el-option
          v-for="item in yardOptions"
          :key="item.nameCode"
          :label="item.nameCode"
          :value="item.yardName"
        ></el-option>
      </el-select>
      <el-date-picker v-if="modStatus === 3" value-format="yyyy-MM-dd" v-model="modSheetTime" type="date" placeholder="选择日期时间"></el-date-picker>
      <el-select v-if="modStatus === 5" size="mini" style="width: 160px;" v-model="modBoatShip" filterable placeholder="请输入船代" @change="modShipChange">
        <el-option v-for="item in shipBoatList" :key="item.zjm" :label="item.zjm" :value="item.shipAgencyName"></el-option>
      </el-select>
      <el-select v-if="modStatus === 5" size="mini" v-model="modBatCompany" style="width:200px;" filterable placeholder="请输入船公司" @change="modShipComChange">
        <el-option
          v-for="item in shipBoatAndList"
          :key="item.nameCncode"
          :label="item.nameCncode"
          :value="item.nameCn"
        ></el-option>
      </el-select>
      <div v-if="modStatus === 1" style="text-align: right; margin: 0; display: inline-block;">
        <el-button size="mini" type="primary" icon="el-icon-check" @click="setPutBoxNote()"></el-button>
        <el-button size="mini" icon="el-icon-close" @click="closePopoverHandler"></el-button>
      </div>
      <div v-else-if="modStatus === 2" style="text-align: right; margin: 0; display: inline-block;">
        <el-button size="mini" type="primary" icon="el-icon-check" @click="modGYard()"></el-button>
        <el-button size="mini" icon="el-icon-close" @click="closePopoverHandler"></el-button>
      </div>
      <div v-else-if="modStatus === 3" style="text-align: right; margin: 0; display: inline-block;">
        <el-button size="mini" type="primary" icon="el-icon-check" @click="modUpTime()"></el-button>
        <el-button size="mini" icon="el-icon-close" @click="closePopoverHandler"></el-button>
      </div>
      <div v-if="modStatus === 5" style="text-align: right; margin: 0; display: inline-block;">
        <el-button size="mini" type="primary" icon="el-icon-check" @click="setBoatShipAndCom()"></el-button>
        <el-button size="mini" icon="el-icon-close" @click="closePopoverHandler"></el-button>
      </div>
    </el-popover>
    <div class="chargeable_table_payable_statement_foot">
        <span style="color: black;">总箱量: {{totalNum}}</span>
        [<span style="color: black;" v-for="(item, index) in sumBoxNum" :key="index">{{item.type + '*' + item.boxnum}}</span>]
        <span style="color: red;">应收总计: {{allMoney}}</span>
        <span style="color: red;">[<span style="color: red;" v-for="(item, index) in feeBoxData" :key="index">{{item.feeName + ':' + item.money}}</span>]</span>
      </div>
    <!--分页-->
      <div style=" width: 100%; margin: 0 auto;">
        <el-pagination layout="total,prev,pager,next,sizes" :page-size="limit" :total="total" :current-page.sync="page" :page-sizes="[30, 50, 100, 200]" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
      </div>
      <details-dialog :visible="detailsView" @visibleChange="detailsViewVisibleChange" :table-index-data="selectedTableDataAlone" @getTableData="searSeach"></details-dialog>
      <cod-details-dialog :visible="codDetailsView" @visibleChange="codDetailsViewVisibleChange" :table-index-data="selectedTableDataAlone" @getTableData="searOneSeach"></cod-details-dialog>
      <!-- 设置列表 -->
      <list-setting-dialog :table-props="fieldStr" :allList="allStr" :listIndex="listIndex" @changtype="changtype" :pageName="pageName" :open="open" @close="closeL"></list-setting-dialog>
      <list-setting-excat-dialog :table-props="fieldStrExt" :allList="allStrExt" :listIndex="listIndexExport" :pageName="pageName" :open="openExt" @close="closeExt"></list-setting-excat-dialog>
  </div>
</template>

<script>
import {
  HisttoryputBoxedList,
  boatCompanyList,
  updatePutBoxNote,
  yardList,
  updateYard,
  singleTime,
  matchOrder,
  userInfo,
  lockUnlock,
  SearchUserInfo,
  shipAgencyList,
  viewStatistics,
  exportData,
  getreceiptNo,
  shipCompanyList,
  transferBill,
  execelData,
  getSalesman,
  delPutBoxFile,
  updateCollectBoatAgentName,
  importStatisticData,
  exitExprot,
  completeReview,
  getDispatchRecord,
  Sendpickup,
  withdrawTeam,
  getRecordList
} from './api/putBoxManage'
import {
  getField,
  setputBoxFieldOrder
} from '../finance/api/finance'
import moment from 'moment'
import ListSettingDialog from '../shared/ListSettingDialog'
import ListSettingExcatDialog from '../shared/ListSettingExcatDialog'
import DetailsDialog from './dialog/DetailsDialog.vue'
import CodDetailsDialog from './dialog/codDetailsDialog.vue'
import util from '@util'
export default {
  components: {
    DetailsDialog,
    ListSettingDialog,
    CodDetailsDialog,
    ListSettingExcatDialog
  },
  data () {
    return {
      Data: {
        applyDate: [],
        boxState: '-1',
        blno: ''
      },
      allMoney: '',
      totalNum: '',
      carrierForm: {
        carrier: '',
        phone: '',
        licenseplatenumber: ''
      },
      sumBoxNum: [],
      feeBoxData: [],
      tableData: [],
      exportDataHear: [],
      shipAgencyNameOptions: [],
      selectedTableData: [],
      selectedTableDataAlone: {},
      yardOptions: [],
      modRow: {},
      uploadData: {},
      chuangongshiOptions: [],
      customerNameOptions: [],
      salesmanOptions: [],
      putBoxPartOptions: [],
      statisticsData: [],
      statisticsType: [],
      shipBoatEirAndList: [],
      fieldList: [],
      shipBoatList: [],
      shipBoatAndList: [],
      listIndex: '',
      listIndexExport: '',
      allList: [],
      carInfoEirArr: [],
      carInfoEirToArr: [],
      sendLookInfoArr: [],
      fieldListExt: [],
      sunNum: 0,
      feeRole: '0',
      pageName: '',
      eirShip: '',
      eirCompany: '',
      eirCode: '',
      tableHeight: 0,
      eirData: '',
      modPutBoxNote: '',
      modBoatShip: '',
      modBoatShipCode: '',
      modBatCompany: '',
      modBatCompanyCode: '',
      eirShipId: '',
      modSheetTime: '',
      modYard: '',
      modYardId: '',
      filesImg: '',
      eirNoAlone: '',
      recordIdCar: '',
      carrierFormView: false,
      openExt: false,
      sendLookInfoView: false,
      filesView: false,
      shutOutView: false,
      filesImgView: false,
      filesImgSrc: '',
      key: false,
      showPopover: false,
      detailsView: false,
      codDetailsView: false,
      viewStatisticsVisible: false,
      viewStatisticsTVisible: false,
      // eirInfoVisible: false,
      loadingView: false,
      open: false,
      EirToCarView: false,
      sendDriverView: false,
      modStatus: '',
      cacheId: '', // 缓存辨识ID
      cacheColumnLabel: '', // 缓存表头文本
      limit: 30,
      total: 0,
      page: 1,
      userType: '',
      fieldStr: '',
      allStr: '',
      fieldStrExt: '',
      allStrExt: '',
      // pageNameExt: ''
    }
  },
  computed: {
    myfieldList: function () {
      return this.fieldList.filter(function (value) {
        return value.isShow === true
      })
    }
  },
  created () {
    this.keyupSubmit()
  },
  async mounted () {
    this.getUserInfo()
    this.Data.applyDate = [moment(new Date()).format('YYYY-MM-DD'), moment(new Date()).format('YYYY-MM-DD')]
    setTimeout(() => {
      this.tableHeight = 734
    }, 1000)
    const user = util.getItem('$user_fx')
    Object.assign(this.uploadData, {
      un: user.un,
      rtk: user.rtk,
      uid: user.uid,
      Picture: '',
      userCode: '',
      type: ''
    })
  },
  methods: {
    sendDriverViewOpen (row) {
      console.log(row, 'pai')
      this.carInfoEirToArr = this.selectedTableData
      this.eirNoAlone = this.carInfoEirToArr[0].eirNo[0].receiptNo
      this.recordIdCar = row.recordId
      this.sendDriverView = true
    },
    async completeReviewClick () {
      let res = await completeReview({
        userCodeList: this.selectedTableData
      })
      if (res.status === 200) {
        this.$notify({
          title: '修改成功',
          message: '修改成功',
          type: 'success',
          duration: 1000
        })
        this.searSeach()
      } else {
        this.$notify.error({
          title: '修改失败',
          message: res.msg,
          duration: 1000
        })
      }
    },
    async exportDataClickAll () {
      this.loadingView = true
      this.Data.showStyleId = this.listIndexExport
      const res = await exitExprot(this.Data)
      this.mydata = res.data
      if (res.status === 200) {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success',
          duration: 1000
        })
        this.loadingView = false
        window.location.href = res.data[0].path
        // this.serachTableData()
      } else {
        this.loadingView = false
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error',
          duration: 1000
        })
      }
    },
    keyupSubmit () {
      document.onkeydown = e => {
        let _key = window.event.keyCode
        if (_key === 13) {
          this.searOneSeach()
        }
      }
    },
    async setBoatShipAndCom () {
      // console.log(this.modRow, '1123')
      let res = await updateCollectBoatAgentName({
        userCode: this.modRow.userCode,
        boatAgentName: this.modBatCompany,
        boatAgentId: this.modBatCompanyCode,
        shipAgencyId: this.modBoatShipCode,
        shipAgencyName: this.modBoatShip,
        boxType: this.modRow.boxType,
        relevanceBussId: this.modRow.relevanceBussId,
        relevanceBoxId: this.modRow.relevanceBoxId,
        clientId: this.modRow.userIdc
      })
      if (res.status === 200) {
        this.$notify({
          title: '修改成功',
          message: '修改成功',
          type: 'success',
          duration: 1000
        })
        this.closePopoverHandler()
        this.searSeach()
      } else {
        this.$notify.error({
          title: '修改失败',
          message: res.msg,
          duration: 1000
        })
      }
    },
    modShipChange (a) {
      this.shipBoatList.map((item, index, arr) => {
        if (a === item.shipAgencyName) {
          // item.boatCompany.map((itema, indexa, arra) => {
          //   if (itema.nameCncode === 'IRNL-伊朗航运EIR') {
          //     item.boatCompany.splice(1, 1)
          //   }
          //   if (itema.nameCncode === 'WOS-西联航运EIR') {
          //     item.boatCompany.splice(5, 1)
          //   }
          // })
          this.shipBoatAndList = item.boatCompany
          this.modBoatShipCode = item.shipAgencyId
          this.modBatCompany = item.boatCompany[0].nameCn
          this.modBatCompanyCode = item.boatCompany[0].boatComId
        }
      })
    },
    modShipComChange (a) {
      this.shipBoatAndList.map((item, index, arr) => {
        if (a === item.nameCn) {
          this.modBatCompanyCode = item.boatComId
        }
      })
    },
    lookFiles (row) {
      if (row.fileType === 0) {
        this.filesImg = row.putBoxfile
        this.filesView = true
      } else {
        this.filesImgSrc = row.putBoxfile
        this.filesImgView = true
      }
    },
    async dargerFiles (row) {
      let res = await delPutBoxFile({
        putBoxFileId: row.putBoxFileId
      })
      if (res.status === 200) {
        this.$notify({
          title: '删除成功',
          message: '删除成功',
          type: 'success',
          duration: 1000
        })
        this.searSeach()
      } else {
        this.$notify.error({
          title: '错误',
          message: res.msg,
          duration: 1000
        })
      }
    },
    uploadFiles (a, b) {
      this.uploadData.userCode = b.userCode
      this.uploadData.type = b.type
    },
    beforeAvatarUpload (file) {
      this.uploadData.Picture = file
    },
    handleAvatarSuccess (res, file) {
      if (res.status === 200) {
        this.$notify({
          title: '上传成功',
          message: '上传成功',
          type: 'success',
          duration: 1000
        })
        this.searSeach()
      } else {
        this.$notify({
          title: '上传失败',
          message: res.msg,
          type: 'success',
          duration: 1000,
          position: 'bottom-right'
        })
      }
    },
    // 派单
    async changeOrder () {
      if (this.selectedTableData.length === 0) {
        this.$notify.error({
          title: '派单失败',
          message: '请选择一条数据!',
          duration: 1000
        })
      } else {
        this.loadingView = true
        let res = await transferBill({
          userCode: this.selectedTableData
        })
        if (res.status === 200) {
          this.loadingView = false
          this.$notify({
            title: '获取成功',
            message: '获取成功',
            type: 'success',
            duration: 1000
          })
        } else {
          this.loadingView = false
          this.$notify.error({
            title: '获取失败',
            message: res.msg,
            duration: 1000
          })
        }
      }
    },
    // EIR派车
    async eirCarTo () {
      if (this.selectedTableData.length === 0) {
        this.$notify.error({
          title: '派车失败',
          message: '请选择一条数据!',
          duration: 1000
        })
      } else if (this.selectedTableData.length === 1) {
        let res = await getDispatchRecord({
          userCode: this.selectedTableData[0].userCode
        })
        this.carInfoEirArr = res.data
        this.EirToCarView = true
      } else {
        this.$notify.error({
          title: '派车失败',
          message: '只能选择一条数据哦!',
          duration: 1000
        })
      }
    },
    // 获取EIR
    // async getEirClick () {
    //   this.loadingView = true
    //   let res = await getreceiptNo({
    //     billNbr: this.selectedTableData[0].blno,
    //     type: this.selectedTableData[0].type,
    //     trustCode: this.eirCode,
    //     shipAgencyId: this.eirShipId,
    //     imo: 2
    //   })
    //   if (res.status === 200) {
    //     this.loadingView = false
    //     this.$notify({
    //       title: '获取成功',
    //       message: '获取成功',
    //       type: 'success'
    //     })
    //     this.searSeach()
    //   } else {
    //     this.loadingView = false
    //     this.$notify.error({
    //       title: '获取失败',
    //       message: res.msg
    //     })
    //   }
    // },
    // 获取关联船代船公司
    async getBoatAndBoatT () {
      let res = await shipCompanyList({
        import: 2
      })
      this.shipBoatList = res.data
    },
    // 获取EIR弹窗
    async getEirInfo () {
      if (this.selectedTableData.length === 0) {
        this.$notify.error({
          title: '设置失败',
          message: '请选择一条数据!',
          duration: 1000
        })
      } else {
        if (this.selectedTableData[0].transfer === '1') {
          this.$notify.error({
            title: '设置失败',
            message: '此条数据为转单数据，无法操作！',
            duration: 1000
          })
        } else {
        // this.eirInfoVisible = true
        // this.eirShip = this.selectedTableData[0].shipAgencyName
        // this.eirShipId = this.selectedTableData[0].shipAgencyId
          this.loadingView = true
          let res = await getreceiptNo({
            // billNbr: this.selectedTableData[0].blno,
            // type: this.selectedTableData[0].type,
            // trustCode: this.eirCode,
            imo: 2,
            // shipAgencyId: this.selectedTableData[0].shipAgencyId,
            // boatAgentId: this.selectedTableData[0].boatAgentId,
            // status: this.selectedTableData[0].orderStatus
            batcheirList: this.selectedTableData
          })
          if (res.status === 200) {
            this.loadingView = false
            this.$notify({
              title: '获取成功',
              message: '获取成功',
              type: 'success',
              duration: 1000
            })
            this.searSeach()
          } else {
            this.loadingView = false
            this.$notify.error({
              title: '获取失败',
              message: res.msg,
              duration: 1000
            })
          }
        }
        // this.shipBoatList.map((item, index, arr) => {
        //   if (this.selectedTableData[0].shipAgencyId === item.shipAgencyId) {
        //     this.shipBoatEirAndList = item.boatCompany
        //   }
        // })
      }
    },
    // 船公司改变事件
    // modShipComChange (val) {
    //   console.log(val)
    //   this.shipBoatEirAndList.map((item, index, arr) => {
    //     if (val === item.boatComId) {
    //       this.eirCode = item.code
    //     }
    //   })
    // },
    // 日账单导出
    async exportDataClick () {
      let head = {
        row: '序号',
        boxState: '状态',
        clientName: '客户名称',
        shipAgencyName: '船代',
        company: '船公司',
        boat: '船名',
        voyage: '航次',
        blno: '提单号',
        boxType: '箱型箱量',
        mome: '要求',
        putBoxNote: '放箱备注',
        yard: '提箱点',
        sumMoney: '总费用',
        ddf: '打单费',
        fwf: '服务费',
        txf: '提箱费',
        qt: '其他费',
        cqf: '超期费',
        abf: '安保费',
        applyTime: '申请时间',
        updateTime: '对单时间'
      }
      this.Data.page = this.page
      this.Data.num = 10000000
      if (this.Data.applyDate === [] || this.Data.applyDate === null) {
        this.Data.applyStartTime = ''
        this.Data.applyEndTime = ''
      } else {
        this.Data.applyStartTime = this.Data.applyDate[0]
        this.Data.applyEndTime = this.Data.applyDate[1]
      }
      this.loadingView = true
      const res = await execelData(this.Data)
      if (res.status === 200) {
        this.exportDataHear = res.data
      } else {
        this.$notify.error({
          title: '错误',
          message: res.msg,
          duration: 1000
        })
      }
      this.exportDataHear.unshift(head)
      let ress = await exportData({
        fileName: '出口日账单',
        sheetName: '出口日账单',
        jsonStr: JSON.stringify(this.exportDataHear),
        comName: this.userType.FullName, // 公司名称
        comPhone: '', // 公司电话
        comFax: '', // 公司传真
        tableName: '出口日账单' // 表格标题
      })
      if (res.status === 200) {
        this.loadingView = false
        window.location.href = ress.data[0].path
      } else {
        this.loadingView = false
        this.$notify.error({
          title: '导出失败',
          message: res.msg,
          duration: 1000
        })
      }
    },
    // 清空下拉内容搜索
    clearContent () {
      this.searOneSeach()
    },
    // 查看统计
    async viewStatistics () {
      if (this.Data.applyDate === null || this.Data.applyDate === []) {
        this.Data.applyStartTime = ''
        this.Data.applyEndTime = ''
      } else {
        this.Data.applyStartTime = this.Data.applyDate[0]
        this.Data.applyEndTime = this.Data.applyDate[1]
      }
      this.loadingView = true
      let res = await viewStatistics({
        blno: this.Data.blno,
        startTime: this.Data.applyStartTime,
        endTime: this.Data.applyEndTime,
        status: this.Data.boxState,
        putBoxNote: this.Data.putBoxNote,
        customerName: this.Data.customerName,
        shipCoID: this.Data.shipAgencyName,
        carrierID: this.Data.company
      })
      if (res.status === 200) {
        this.loadingView = false
        this.statisticsData = res.data[0]
        this.statisticsType = res.boxNum
        this.sunNum = 0
        for (let i = 0; i < res.boxNum.length; i++) {
          this.sunNum += parseInt(res.boxNum[i].num)
        }
        if (this.userType === '7') {
          this.viewStatisticsVisible = true
        } else {
          this.viewStatisticsTVisible = true
        }
      } else {
        this.loadingView = false
        this.$notify.error({
          title: '错误',
          message: res.msg,
          duration: 1000
        })
      }
    },
    close () {
      this.viewStatisticsVisible = false
    },
    closeT () {
      this.viewStatisticsTVisible = false
    },
    // closeEir () {
    //   this.eirInfoVisible = false
    // },
    // 申请时间改变搜索事件
    async applyDateChange (a) {
      if (a === null || this.Data.applyDate === null) {
        this.Data.applyStartTime = ''
        this.Data.applyEndTime = ''
      } else {
        this.Data.applyStartTime = a[0]
        this.Data.applyEndTime = a[1]
      }
      this.Data.page = 1
      this.Data.num = this.limit
      this.loadingView = true
      const res = await HisttoryputBoxedList(this.Data)
      if (res.status === 200) {
        this.loadingView = false
        this.tableData = res.data
        this.total = res.count
        const ress = await importStatisticData(this.Data)
        this.sumBoxNum = ress.boxNum
        this.feeBoxData = ress.feeTotal
        this.allMoney = ress.allMoney
        this.totalNum = ress.totalNum
      } else {
        this.loadingView = false
        this.$notify.error({
          title: '错误',
          message: res.msg,
          duration: 1000
        })
      }
    },
    // 客户改变搜索事件
    async custormerChange (a) {
      this.Data.page = 1
      this.Data.num = this.limit
      this.Data.customerName = a
      this.loadingView = true
      const res = await HisttoryputBoxedList(this.Data)
      if (res.status === 200) {
        this.loadingView = false
        this.tableData = res.data
        this.total = res.count
        const ress = await importStatisticData(this.Data)
        this.sumBoxNum = ress.boxNum
        this.feeBoxData = ress.feeTotal
        this.allMoney = ress.allMoney
        this.totalNum = ress.totalNum
      } else {
        this.loadingView = false
        this.$notify.error({
          title: '错误',
          message: res.msg,
          duration: 1000
        })
      }
    },
    async salesmanChange (a) {
      this.Data.page = 1
      this.Data.num = this.limit
      this.Data.theOperatorId = a
      this.loadingView = true
      const res = await HisttoryputBoxedList(this.Data)
      if (res.status === 200) {
        this.loadingView = false
        this.tableData = res.data
        this.total = res.count
        const ress = await importStatisticData(this.Data)
        this.sumBoxNum = ress.boxNum
        this.feeBoxData = ress.feeTotal
        this.allMoney = ress.allMoney
        this.totalNum = ress.totalNum
      } else {
        this.loadingView = false
        this.$notify.error({
          title: '错误',
          message: res.msg,
          duration: 1000
        })
      }
    },
    async putBoxPartChange (a) {
      this.Data.page = 1
      this.Data.num = this.limit
      this.Data.putBoxPartId = a
      this.loadingView = true
      const res = await HisttoryputBoxedList(this.Data)
      if (res.status === 200) {
        this.loadingView = false
        this.tableData = res.data
        this.total = res.count
        const ress = await importStatisticData(this.Data)
        this.sumBoxNum = ress.boxNum
        this.feeBoxData = ress.feeTotal
        this.allMoney = ress.allMoney
        this.totalNum = ress.totalNum
      } else {
        this.loadingView = false
        this.$notify.error({
          title: '错误',
          message: res.msg,
          duration: 1000
        })
      }
    },
    // 船公司改变搜索事件
    async companyChange (a) {
      this.Data.page = 1
      this.Data.num = this.limit
      this.Data.company = a
      this.loadingView = true
      const res = await HisttoryputBoxedList(this.Data)
      if (res.status === 200) {
        this.loadingView = false
        this.tableData = res.data
        this.total = res.count
        const ress = await importStatisticData(this.Data)
        this.sumBoxNum = ress.boxNum
        this.feeBoxData = ress.feeTotal
        this.allMoney = ress.allMoney
        this.totalNum = ress.totalNum
      } else {
        this.loadingView = false
        this.$notify.error({
          title: '错误',
          message: res.msg,
          duration: 1000
        })
      }
    },
    // 船公司改变搜索事件
    async shipAgencyNameChange (a) {
      this.Data.page = 1
      this.Data.num = this.limit
      this.Data.shipAgencyName = a
      this.loadingView = true
      const res = await HisttoryputBoxedList(this.Data)
      if (res.status === 200) {
        this.loadingView = false
        this.tableData = res.data
        this.total = res.count
        const ress = await importStatisticData(this.Data)
        this.sumBoxNum = ress.boxNum
        this.feeBoxData = ress.feeTotal
        this.allMoney = ress.allMoney
        this.totalNum = ress.totalNum
      } else {
        this.loadingView = false
        this.$notify.error({
          title: '错误',
          message: res.msg,
          duration: 1000
        })
      }
    },
    // 获取船代
    async getShipName () {
      let res = await shipAgencyList()
      this.shipAgencyNameOptions = res.data
    },
    // 获取客户信息
    async getComInfo () {
      let res = await SearchUserInfo({
        num: 1000000,
        page: 1
      }
      )
      this.customerNameOptions = res.data
    },
    // 获取业务员信息
    async getSalesmanList () {
      let res = await getSalesman({
        num: 1000000,
        page: 1,
        userType: 8,
        state: 1
      }
      )
      this.salesmanOptions = res.data
    },
    // 获取放箱员信息
    async getPutBoxPartList () {
      let res = await getSalesman({
        num: 1000000,
        page: 1,
        userType: 9,
        state: 1
      }
      )
      this.putBoxPartOptions = res.data
    },
    // 锁住状态
    tableRowClassName (a) {
      if (a.row.isLock === '1') {
        return 'lockColor'
      }
    },
    // 设置费用明细
    setDetails () {
      if (this.selectedTableData.length === 0) {
        this.$notify.error({
          title: '设置失败',
          message: '请选择一条数据!',
          duration: 1000
        })
      } else if (this.selectedTableData.length === 1) {
        if (this.selectedTableData[0].isLock === '1') {
          this.$notify.error({
            title: '设置失败',
            message: '此订单已上锁!',
            duration: 1000
          })
        } else {
          this.detailsView = true
        }
      } else {
        this.$notify.error({
          title: '设置失败',
          message: '只能选择一条数据哦!',
          duration: 1000
        })
      }
    },
    // 复制下单
    codOrderClick () {
      if (this.selectedTableData.length === 0) {
        this.$notify.error({
          title: '设置失败',
          message: '请选择一条数据!',
          duration: 1000
        })
      } else if (this.selectedTableData.length === 1) {
        this.codDetailsView = true
      } else {
        this.$notify.error({
          title: '设置失败',
          message: '只能选择一条数据哦!',
          duration: 1000
        })
      }
    },
    dbTableClick (val) {
      console.log(val.isLock, '112')
      if (val.isLock === '0') {
        this.selectedTableDataAlone = val
        this.detailsView = true
      } else {
        this.$notify.error({
          title: '设置失败',
          message: '此数据已锁定，无法修改费用!',
          duration: 1000
        })
      }
    },
    // 业务锁定未锁定
    async lockUnlock (index) {
      if (this.selectedTableData.length > 0) {
        let res = await lockUnlock({
          codeList: this.selectedTableData,
          isLock: index
        })
        if (res.status === 200) {
          this.$notify({
            title: '修改成功',
            message: '修改成功',
            type: 'success',
            duration: 1000
          })
          this.searSeach()
        } else {
          this.$notify.error({
            title: '修改失败',
            message: res.msg,
            duration: 1000
          })
        }
      } else {
        this.$notify.error({
          title: '设置失败',
          message: '请选择数据!',
          duration: 1000
        })
      }
    },
    async getUserInfo () {
      let res = await userInfo()
      this.userType = res.data[0].userType
      this.feeRole = res.data[0].feeRole
      if (res.status === 200) {
        this.getSettingList('出口放箱汇总')
        this.getSettingListExport('出口放箱汇总导出')
        this.gitBoxHistoryData()
      } else {
        this.$notify.error({
          title: '权限获取失败',
          message: res.msg,
          duration: 1000
        })
      }
    },
    async shutOutClick () {
      let res = await matchOrder({
        codeList: this.selectedTableData,
        boxState: 0
      })
      if (res.status === 200) {
        this.$notify({
          title: '修改成功',
          message: '修改成功',
          type: 'success',
          duration: 1000
        })
        this.shutOutView = false
        this.searSeach()
      } else {
        this.$notify.error({
          title: '修改失败',
          message: res.msg,
          duration: 1000
        })
      }
    },
    // 状态更改
    async opMatchOrder (a) {
      if (this.selectedTableData.length === 0) {
        this.$notify.error({
          title: '设置失败',
          message: '请选择数据!',
          duration: 1000
        })
      } else {
        if (a === 0) {
          if (this.selectedTableData[0].transfer === '2') {
            this.selectedTableData.map((item, index, arr) => {
              if (item.transfer === '2') {
                this.$notify.error({
                  title: '回退失败',
                  message: '数据中包含有转单数据!',
                  duration: 1000
                })
              }
            })
          } else {
            this.shutOutView = true
          }
        } else {
          if (this.selectedTableData[0].transfer === '2') {
            if (a === 16) {
              let res = await matchOrder({
                codeList: this.selectedTableData,
                boxState: a
              })
              if (res.status === 200) {
                this.$notify({
                  title: '修改成功',
                  message: '修改成功',
                  type: 'success',
                  duration: 1000
                })
                this.searSeach()
              } else {
                this.$notify.error({
                  title: '修改失败',
                  message: res.msg,
                  duration: 1000
                })
              }
            } else {
              this.$notify.error({
                title: '设置失败',
                message: '此条数据为已转单数据，无法操作！',
                duration: 1000
              })
            }
          } else {
            let res = await matchOrder({
              codeList: this.selectedTableData,
              boxState: a
            })
            if (res.status === 200) {
              this.$notify({
                title: '修改成功',
                message: '修改成功',
                type: 'success',
                duration: 1000
              })
              this.searSeach()
            } else {
              this.$notify.error({
                title: '修改失败',
                message: res.msg,
                duration: 1000
              })
            }
          }
        }
      }
    },
    setmySales (row, column, cell, event) {
      const target = event
      this.modRow = row
      if (row.transfer === '2' || row.isLock === '1') {

      } else {
        if (column.label === '船代' || column.label === '船公司') {
          this.modStatus = 5
          this.modBoatShip = row.shipAgencyName
          this.modBoatShipCode = row.shipAgencyId
          this.modBatCompany = row.company
          this.modBatCompanyCode = row.boatAgentId
          this.showPopoverHandler(target, row.userCode, column.label)
          this.shipBoatList.map((item, index, arr) => {
            if (row.shipAgencyName === item.shipAgencyName) {
              // item.boatCompany.map((itema, indexa, arra) => {
              //   if (itema.nameCncode === 'IRNL-伊朗航运EIR') {
              //     item.boatCompany.splice(1, 1)
              //   }
              //   if (itema.nameCncode === 'WOS-西联航运EIR') {
              //     item.boatCompany.splice(5, 1)
              //   }
              // })
              this.shipBoatAndList = item.boatCompany
            }
          })
        }
      }
      if (column.label === '放箱备注') {
        this.modStatus = 1
        this.modPutBoxNote = row.putBoxNote
        this.showPopoverHandler(target, row.userCode, column.label)
      } else if (column.label === '提箱点') {
        this.modStatus = 2
        this.modYard = row.yard
        this.showPopoverHandler(target, row.userCode, column.label)
      } else if (column.label === '对单时间') {
        this.modStatus = 3
        this.modSheetTime = row.updateTime
        this.showPopoverHandler(target, row.userCode, column.label)
      }
    },
    sendDriverCellClick (row, column, cell, event) {
      if (column.label === '承运人') {
        this.carrierFormView = true
      }
    },
    async driverHistoryViewClick (row) {
      let res = await getRecordList({
        recordId: row.recordId
      })
      if (res.status === 200) {
        this.sendLookInfoArr = res.data
        this.sendLookInfoView = true
      } else {
        this.$notify.error({
          title: '查看失败',
          message: res.msg,
          duration: 1000
        })
      }

    },
    carrierFormFlase () {
      this.carrierForm.carrier = ''
      this.carrierForm.phone = ''
      this.carrierForm.licenseplatenumber = ''
      this.carrierFormView = false
    },
    async dispatchWithdraw (row) {
      // let arr = []
      if (row.eirNo === '') {
        this.$notify.error({
          title: '派车失败',
          message: 'EIR号为空',
          duration: 1000
        })
      } else {
        // arr[0] = {
        //   receiptNo: row.eirNo
        // }
        let res = await withdrawTeam({
          haulierList: this.selectedTableData[0].eirNo,
          userCode: row.userCode
        })
        if (res.status === 200) {
          this.$notify({
            title: '撤回成功',
            message: '撤回成功',
            type: 'success',
            duration: 1000
          })
        } else {
          this.$notify.error({
            title: '撤回失败',
            message: res.msg,
            duration: 1000
          })
        }
      }
    },
    async sendDanSure (row) {
      console.log(row, '556677')
      let arr = []
      if (this.eirNoAlone === '') {
        this.$notify.error({
          title: '派车失败',
          message: 'EIR号为空',
          duration: 1000
        })
      } else {
        arr[0] = {
          receiptNo: this.eirNoAlone
        }
        let res = await Sendpickup({
          truckNo: this.carrierForm.licenseplatenumber,
          empName: this.carrierForm.carrier,
          empTel: this.carrierForm.phone,
          receiptNo: this.eirNoAlone,
          haulierList: arr,
          userIdc: row.userIdc,
          recordId: this.recordIdCar
        })
        if (res.status === 200) {
          this.$notify({
            title: '派单成功',
            message: '派单成功',
            type: 'success',
            duration: 1000
          })
        } else {
          this.$notify.error({
            title: '派单失败',
            message: res.msg,
            duration: 1000
          })
        }
      }
    },
    closePopoverHandler () {
      this.cacheId = ''
      this.cacheColumnLabel = ''
      this.showPopover = false
    },
    // 绑定显示popover方法
    showPopoverHandler (element, id, label) {
      // 显示、隐藏条件
      if (this.cacheId === id && this.cacheColumnLabel === label) {
        this.showPopover = !this.showPopover
        return
      } else {
        this.cacheId = id
        this.cacheColumnLabel = label
        this.showPopover = true
      }
      // 设置popover样式
      const popper = this.$refs.operationPopover.$refs.popper
      if (this.showPopover) {
        setTimeout(() => {
          const left = element.clientX
          const top = element.clientY
          popper.setAttribute('style', `position: fixed; top: ${top - 70}px; left: ${left - 120}px;`)
        }, 100) // 100ms延迟,等待dom渲染
      } else {
        popper.removeAttribute('style')
      }
    },
    // 修改对单时间
    async modUpTime () {
      let res = await singleTime({
        time: this.modSheetTime,
        userCode: this.modRow.userCode,
        type: this.modRow.type
      })
      if (res.status === 200) {
        this.$notify({
          title: '修改成功',
          message: '修改成功',
          type: 'success',
          duration: 1000
        })
        this.closePopoverHandler()
        this.searSeach()
      } else {
        this.$notify.error({
          title: '修改失败',
          message: res.msg,
          duration: 1000
        })
      }
    },
    detailsViewVisibleChange (value) {
      this.detailsView = value
    },
    codDetailsViewVisibleChange (value) {
      this.codDetailsView = value
    },
    // 修改放箱备注
    async setPutBoxNote () {
      console.log(this.modRow, '5566')
      if (this.modRow.transfer === '2') {
        this.modRow.relevanceBoxId = ''
      }
      let res = await updatePutBoxNote({
        putBoxNote: this.modPutBoxNote,
        userCode: this.modRow.userCode,
        type: this.modRow.type,
        relevanceBoxId: this.modRow.relevanceBoxId
      })
      if (res.status === 200) {
        this.$notify({
          title: '修改成功',
          message: '修改成功',
          type: 'success',
          duration: 1000
        })
        this.closePopoverHandler()
        this.searSeach()
      } else {
        this.$notify.error({
          title: '修改失败',
          message: res.msg,
          duration: 1000
        })
      }
    },
    yardChange (val) {
      this.modYard = val
      this.yardOptions.map((item, index, arr) => {
        if (val === item.yardName) {
          this.modYardId = item.yardId
        }
      })
    },
    // 获取堆场
    async getYard () {
      let res = await yardList({
        code: '',
        yardName: '',
        yardArea: '',
        phoneNumber: ''
      })
      this.yardOptions = res.data
    },
    // 修改堆场
    async modGYard () {
      let res = await updateYard({
        userCode: this.modRow.userCode,
        boxSizeType: this.modRow.boxType,
        blno: this.modRow.blno,
        yardName: this.modYard,
        yardId: this.modYardId,
        shipAgencyId: this.modRow.shipAgencyId,
        boatComId: this.modRow.boatAgentId
      })
      if (res.status === 200) {
        this.$notify({
          title: '修改成功',
          message: '修改成功',
          type: 'success',
          duration: 1000
        })
        this.closePopoverHandler()
        this.searSeach()
      } else {
        this.$notify.error({
          title: '修改失败',
          message: res.msg,
          duration: 1000
        })
      }
    },
    createFilter (queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
      }
    },
    tableRowClass ({row, column, rowIndex, columnIndex}) {
      // console.log(column, '1232')
      if (column.property === 'boxState') {
        if (row.teamTurn === '派单') {
          switch (row.boxState) {
            case '已完成':
              return 'color: #67C23A; font-weight: 700'
            default:
              return 'color: gary; font-weight: 700'
          }
        }
      }
      if (column.property === 'boxState') {
        switch (row.boxState) {
          case '0':
            return 'color: red; font-weight: 700'
          case '放单中':
            return 'color: #67C23A; font-weight: 700'
          case '已完成':
            return 'color: #909399; font-weight: 700'
          case '已拒绝':
            return 'color: #E6A23C; font-weight: 700'
          case '没预配':
            return 'color: red; font-weight: 700'
          case '船期早':
            return 'color: #67C23A; font-weight: 700'
          case '明天放':
            return 'color: #909399; font-weight: 700'
          case '已退关':
            return 'color: #E6A23C; font-weight: 700'
          case '等通知':
            return 'color: #67C23A; font-weight: 700'
          case '客户取消':
            return 'color: #909399; font-weight: 700'
          case '退单':
            return 'color: #F56C6C; font-weight: 700'
          case '申请中':
            return 'color: #F56C6C; font-weight: 700'
          case '爆仓':
            return 'color: #E6A23C; font-weight: 700'
          case '有问题':
            return 'color: #67C23A; font-weight: 700'
          case '缺箱子':
            return 'color: #909399; font-weight: 700'
          case '换单中':
            return 'color: #F56C6C; font-weight: 700'
          case '已对单':
            return 'color: #909399; font-weight: 700'
          default:
            return 'color: #909399; font-weight: 700'
        }
      } else if (column.property === 'yard') {
        switch (row.yard) {
          case '地中海捷运洋山':
            return 'color: red; font-weight: 700'
          case '地中海捷运洋山堆场':
            return 'color: red; font-weight: 700'
          case '地中海捷运洋山3堆场':
            return 'color: red; font-weight: 700'
          case '东方海外仓储（上海）有限公司':
            return 'color: red; font-weight: 700'
          case '东华洋山':
            return 'color: red; font-weight: 700'
          case '东华八':
            return 'color: red; font-weight: 700'
          case '东森千祥':
            return 'color: red; font-weight: 700'
          case '东森芦潮港':
            return 'color: red; font-weight: 700'
          case '洋山四号':
            return 'color: red; font-weight: 700'
          case '洋山三期':
            return 'color: red; font-weight: 700'
          case '洋山一期':
            return 'color: red; font-weight: 700'
          case '拓瑞堆场':
            return 'color: red; font-weight: 700'
          case '新霸达洋山':
            return 'color: red; font-weight: 700'
          case '宜欧堆场':
            return 'color: red; font-weight: 700'
          case '毅发芦潮港':
            return 'color: red; font-weight: 700'
          case '洋山储运':
            return 'color: red; font-weight: 700'
          case '紫东洋山':
            return 'color: red; font-weight: 700'
          case '安吉上港码头':
            return 'color: red; font-weight: 700'
          case '上港新港':
            return 'color: red; font-weight: 700'
          case '上港新港堆场':
            return 'color: red; font-weight: 700'
          case '上港云众堆场':
            return 'color: red; font-weight: 700'
          case '上港海港':
            return 'color: red; font-weight: 700'
          case '创元洋山':
            return 'color: red; font-weight: 700'
          case '创元洋山2堆场':
            return 'color: red; font-weight: 700'
          case '德威五':
            return 'color: red; font-weight: 700'
          case '德威四':
            return 'color: red; font-weight: 700'
          case '东亚洋山':
            return 'color: red; font-weight: 700'
          case '立昌芦潮港堆场':
            return 'color: red; font-weight: 700'
          case '立昌芦潮':
            return 'color: red; font-weight: 700'
          case '立昌芦潮港':
            return 'color: red; font-weight: 700'
          case '普捷通堆场':
            return 'color: red; font-weight: 700'
          case '普捷通一堆场':
            return 'color: red; font-weight: 700'
          case '普捷通一':
            return 'color: red; font-weight: 700'
          case '洋山普捷通':
            return 'color: red; font-weight: 700'
          case '象屿胜狮（上海）堆场':
            return 'color: red; font-weight: 700'
          case '泰聚堆场':
            return 'color: red; font-weight: 700'
          case '中集洋山':
            return 'color: red; font-weight: 700'
          case '中远集发临港':
            return 'color: red; font-weight: 700'
          case '宜隆堆场':
            return 'color: red; font-weight: 700'
          case '中集振洋':
            return 'color: red; font-weight: 700'
          case '珉钧芦潮港':
            return 'color: red; font-weight: 700'
          case '上港外运冠东堆场':
            return 'color: red; font-weight: 700'
          case '东森洋山':
            return 'color: red; font-weight: 700'
          case '鑫三利云众':
            return 'color: red; font-weight: 700'
          case '华裕洋山四堆场':
            return 'color: red; font-weight: 700'
          case '华裕洋山三堆场':
            return 'color: red; font-weight: 700'
          case '华裕洋山二堆场':
            return 'color: red; font-weight: 700'
          case '中海洋山':
            return 'color: red; font-weight: 700'
          case '华裕洋山堆场':
            return 'color: red; font-weight: 700'
          case '拓瑞洋山':
            return 'color: red; font-weight: 700'
          case '朝华洋山':
            return 'color: red; font-weight: 700'
          case '洋山千祥':
            return 'color: red; font-weight: 700'
          case '千祥堆场（洋山）':
            return 'color: red; font-weight: 700'
          case '洋山四号（尚东自动化码头）':
            return 'color: red; font-weight: 700'
          case '洋山四期':
            return 'color: red; font-weight: 700'
          case '洋山盛东':
            return 'color: red; font-weight: 700'
          case '洋山礼才':
            return 'color: red; font-weight: 700'
          case '洋山自动化码头':
            return 'color: red; font-weight: 700'
          case '立昌洋山':
            return 'color: red; font-weight: 700'
          case '上港外运尚东堆场':
            return 'color: red; font-weight: 700'
          case '冠东（洋三）堆场':
            return 'color: red; font-weight: 700'
          case '中集洋山堆场':
            return 'color: red; font-weight: 700'
          case '东方海外仓储':
            return 'color: red; font-weight: 700'
          case '上港外运盛东堆场':
            return 'color: red; font-weight: 700'
          case '洋一':
            return 'color: red; font-weight: 700'
          case '洋三':
            return 'color: red; font-weight: 700'
          case '洋四':
            return 'color: red; font-weight: 700'
          case '胜狮冷柜':
            return 'color: red; font-weight: 700'
          case '中集芦潮港箱厂':
            return 'color: red; font-weight: 700'
          case '东森芦潮港二堆场':
            return 'color: red; font-weight: 700'
          case '东森芦潮港一堆场':
            return 'color: red; font-weight: 700'
          case '珉泰二堆场':
            return 'color: red; font-weight: 700'
          case '奥吉中集洋山':
            return 'color: red; font-weight: 700'
          case '中集洋山箱厂':
            return 'color: red; font-weight: 700'
          case '和芳洋山二堆场':
            return 'color: red; font-weight: 700'
          case '鑫三利云众（洋山堆场）':
            return 'color: red; font-weight: 700'
          case '紫东芦潮港江山堆场':
            return 'color: red; font-weight: 700'
          case '胜师（上海）':
            return 'color: red; font-weight: 700'
          case '鑫三利芦潮港堆场':
            return 'color: red; font-weight: 700'
          default:
            return 'color: #606266; font-weight: 700'
        }
      } else if (column.label === '放箱备注' || column.label === '提箱点' || column.label === '对单时间') {
        return 'color: #606266'
      } else if (column.label === '船代' || column.label === '船公司' || column.label === '船名' || column.label === '航次' || column.label === '提单号' || column.label === '尺寸' || column.label === '箱型' || column.label === '数量' || column.label === '放箱备注' || column.label === '制单码' || column.label === '提箱点') {
        return 'padding: 0px 5px !important;'
      } else {
        return ''
      }
    },
    async getBoatCom () {
      let res = await boatCompanyList({
        nameCncode: ''
      })
      this.chuangongshiOptions = res.data
    },
    // 选中表格
    handleSelectionChange (val) {
      this.selectedTableData = val
      this.selectedTableDataAlone = val[0]
    },
    async gitBoxHistoryData () {
      if (this.Data.applyDate === [] || this.Data.applyDate === null) {
        this.Data.applyStartTime = ''
        this.Data.applyEndTime = ''
      } else {
        this.Data.applyStartTime = this.Data.applyDate[0]
        this.Data.applyEndTime = this.Data.applyDate[1]
      }
      this.loadingView = true
      let res = await HisttoryputBoxedList({
        page: this.page,
        num: this.limit,
        boxState: this.Data.boxState,
        applyStartTime: this.Data.applyStartTime,
        applyEndTime: this.Data.applyEndTime
      })
      if (res.status === 200) {
        this.loadingView = false
        this.tableData = res.data
        this.total = res.count
        const ress = await importStatisticData(this.Data)
        this.sumBoxNum = ress.boxNum
        this.feeBoxData = ress.feeTotal
        this.allMoney = ress.allMoney
        this.totalNum = ress.totalNum
        this.getBoatCom()
        this.getShipName()
        this.getYard()
        this.getComInfo()
        this.getSalesmanList()
        this.getPutBoxPartList()
        this.getBoatAndBoatT()
      } else {
        this.loadingView = false
        this.$notify.error({
          title: '错误',
          message: res.msg,
          duration: 1000
        })
      }
    },
    clearSeach () {
      this.Data.applyDate = []
      this.Data.shipAgencyName = ''
      this.Data.company = ''
      this.Data.customerName = ''
      this.Data.boxState = '-1'
      this.Data.blno = ''
      this.Data.putBoxNote = ''
      this.Data.putBoxPartId = ''
      this.Data.theOperatorId = ''
      this.page = 1
      this.searOneSeach()
    },
    async searSeach () {
      this.Data.page = this.page
      this.Data.num = this.limit
      if (this.Data.applyDate === [] || this.Data.applyDate === null) {
        this.Data.applyStartTime = ''
        this.Data.applyEndTime = ''
      } else {
        this.Data.applyStartTime = this.Data.applyDate[0]
        this.Data.applyEndTime = this.Data.applyDate[1]
      }
      this.loadingView = true
      const res = await HisttoryputBoxedList(this.Data)
      if (res.status === 200) {
        this.loadingView = false
        this.tableData = res.data
        this.total = res.count
        const ress = await importStatisticData(this.Data)
        this.sumBoxNum = ress.boxNum
        this.feeBoxData = ress.feeTotal
        this.allMoney = ress.allMoney
        this.totalNum = ress.totalNum
      } else {
        this.loadingView = false
        this.$notify.error({
          title: '错误',
          message: res.msg,
          duration: 1000
        })
      }
    },
    async searOneSeach () {
      this.page = 1
      this.Data.page = 1
      this.Data.num = this.limit
      if (this.Data.applyDate === [] || this.Data.applyDate === null) {
        this.Data.applyStartTime = ''
        this.Data.applyEndTime = ''
      } else {
        this.Data.applyStartTime = this.Data.applyDate[0]
        this.Data.applyEndTime = this.Data.applyDate[1]
      }
      this.loadingView = true
      const res = await HisttoryputBoxedList(this.Data)
      if (res.status === 200) {
        this.loadingView = false
        this.tableData = res.data
        this.total = res.count
        const ress = await importStatisticData(this.Data)
        this.sumBoxNum = ress.boxNum
        this.feeBoxData = ress.feeTotal
        this.allMoney = ress.allMoney
        this.totalNum = ress.totalNum
      } else {
        this.loadingView = false
        this.$notify.error({
          title: '错误',
          message: res.msg,
          duration: 1000
        })
      }
    },
    handleSizeChange (val) {
      this.limit = val
      this.searSeach()
    },
    handleCurrentChange (val) {
      this.page = val
      this.searSeach()
    },
    changtype (e) {
      this.allList.map((item, index) => {
        if (item.styleId === e) {
          this.fieldList = this.allList[index].returnList
        }
      })
    },
    // 上传默认数据
    async defaultData (mylist, pgnm) {
      const res = await setputBoxFieldOrder({
        pageName: pgnm,
        fieldList: mylist
      })
      if (res.status === 200) {
        this.getSettingList(pgnm)
      } else {
        this.$notify({
          title: '出现错误',
          message: res.msg,
          type: 'error',
          duration: 1000
        })
      }
    },
    // 上传默认数据
    async defaultDataExt (mylist, pgnm) {
      const res = await setputBoxFieldOrder({
        pageName: pgnm,
        fieldList: mylist
      })
      if (res.status === 200) {
        this.getSettingListExport(pgnm)
      } else {
        this.$notify({
          title: '出现错误',
          message: res.msg,
          type: 'error',
          duration: 1000
        })
      }
    },
    // 获取设置列表
    async getSettingList (pgnm) {
      this.pageName = pgnm
      const res = await getField({
        pageName: pgnm
      })
      if (res.status === 200) {
        if (res.data.length === 0) {
          let myList = [
            { field: '序号', props: 'row', isShow: 0, width: 35, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '状态', props: 'boxState', isShow: 0, width: 50, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '用箱人', props: 'clientName', isShow: 0, width: 75, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '船代', props: 'shipAgencyName', isShow: 0, width: 70, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '船公司', props: 'company', isShow: 0, width: 100, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '船名', props: 'boat', isShow: 0, width: 180, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '航次', props: 'voyage', isShow: 0, width: 90, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '提单号', props: 'blno', isShow: 0, width: 165, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '箱型箱量', props: 'boxType', isShow: 0, width: 70, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '要求', props: 'mome', isShow: 0, width: 130, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '放箱备注', props: 'putBoxNote', isShow: 0, width: 130, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '转单回复', props: 'turnReply', isShow: 0, width: 130, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '提箱点', props: 'yard', isShow: 0, width: 125, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '总费用', props: 'sumMoney', isShow: 0, width: 80, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '船代费用', props: 'shipAgencyFee', isShow: 0, width: 80, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: 'EirNo', props: 'eirNo', isShow: 0, width: 150, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '申请时间', props: 'applyTime', isShow: 0, width: 120, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '对单时间', props: 'updateTime', isShow: 0, width: 100, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '业务员', props: 'fullName', isShow: 0, width: 100, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '放箱员', props: 'putBoxPartName', isShow: 0, width: 100, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '车队录单员', props: 'record', isShow: 0, width: 100, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '业务状态', props: 'teamTurn', isShow: 0, width: 60, colour: '', styleId: '', styleName: '默认样式', styleType: 1 }
          ]
          this.defaultData(myList, pgnm)
        } else {
          let myid = ''
          if (res.showStyleId === '') {
            myid = 0
          }
          res.data.map((value, index) => {
            if (value.styleId === res.showStyleId) {
              myid = index
            }
            value.returnList.map(item => {
              if (item.isShow === '0') {
                item.isShow = true
              } else {
                item.isShow = false
              }
            })
          })
          this.allList = res.data
          this.listIndex = res.showStyleId
          this.fieldList = res.data[myid].returnList

          if (this.feeRole != '2' && this.feeRole != '0') {
            this.fieldList.map((item, index) => {
              if (this.fieldList[index].field === '船代费用') {
                this.fieldList.splice(index, 1)
              }
            })
          }
          if (this.feeRole != '1' && this.feeRole != '0') {
            this.fieldList.map((item, index) => {
              if (this.fieldList[index].field === '总费用') {
                this.fieldList.splice(index, 1)
              }
            })
          }
          this.key = true
        }
      } else {
        this.$notify({
          title: '出现错误',
          message: res.msg,
          type: 'error',
          duration: 1000
        })
      }
    },
    // 获取导出设置列表
    async getSettingListExport (pgnm) {
      this.pageName = pgnm
      const res = await getField({
        pageName: pgnm
      })
      if (res.status === 200) {
        if (res.data.length === 0) {
          let myList = [
            { field: '序号', props: 'row', isShow: 0, width: 35, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '状态', props: 'boxState', isShow: 0, width: 50, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '用箱人', props: 'clientName', isShow: 0, width: 75, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '船代', props: 'shipAgencyName', isShow: 0, width: 70, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '船公司', props: 'company', isShow: 0, width: 100, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '船名', props: 'boat', isShow: 0, width: 180, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '航次', props: 'voyage', isShow: 0, width: 90, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '提单号', props: 'blno', isShow: 0, width: 165, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '箱型箱量', props: 'boxType', isShow: 0, width: 70, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '要求', props: 'mome', isShow: 0, width: 130, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '放箱备注', props: 'putBoxNote', isShow: 0, width: 130, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '转单回复', props: 'turnReply', isShow: 0, width: 130, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '提箱点', props: 'yard', isShow: 0, width: 125, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '总费用', props: 'sumMoney', isShow: 0, width: 80, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '船代费用', props: 'shipAgencyFee', isShow: 0, width: 80, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: 'EirNo', props: 'eirNo', isShow: 0, width: 150, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '申请时间', props: 'applyTime', isShow: 0, width: 120, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '对单时间', props: 'updateTime', isShow: 0, width: 100, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '业务员', props: 'fullName', isShow: 0, width: 100, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '放箱员', props: 'putBoxPartName', isShow: 0, width: 100, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '业务状态', props: 'teamTurn', isShow: 0, width: 60, colour: '', styleId: '', styleName: '默认样式', styleType: 1 }
          ]
          this.defaultDataExt(myList, pgnm)
        } else {
          let myid = ''
          if (res.showStyleId === '') {
            myid = 0
          }
          res.data.map((value, index) => {
            if (value.styleId === res.showStyleId) {
              myid = index
            }
            value.returnList.map(item => {
              if (item.isShow === '0') {
                item.isShow = true
              } else {
                item.isShow = false
              }
            })
          })
          this.allList = res.data
          this.listIndexExport = res.showStyleId
          this.fieldListExt = res.data[myid].returnList

          // if (this.feeRole != '2' && this.feeRole != '0') {
          //   this.fieldList.map((item, index) => {
          //     if (this.fieldList[index].field === '船代费用') {
          //       this.fieldList.splice(index, 1)
          //     }
          //   })
          // }
          // if (this.feeRole != '1' && this.feeRole != '0') {
          //   this.fieldList.map((item, index) => {
          //     if (this.fieldList[index].field === '总费用') {
          //       this.fieldList.splice(index, 1)
          //     }
          //   })
          // }
          this.key = true
        }
      } else {
        this.$notify({
          title: '出现错误',
          message: res.msg,
          type: 'error',
          duration: 1000
        })
      }
    },
    parentName () {
      console.log(this.pageName, '2312')
      this.searSeach()
      if (this.pageName === '出口放箱汇总导出') {
        this.getSettingListExport('出口放箱汇总导出')
      } else {
        this.getSettingList('出口放箱汇总')
      }
      
    },
    // 子组件方法
    closeL () {
      this.open = false
    },
    // 子组件方法
    closeExt () {
      this.openExt = false
    },
    // 打开列表设置
    tableSetting () {
      this.allStr = JSON.stringify(this.allList)
      this.fieldStr = JSON.stringify(this.fieldList)
      this.getSettingList('出口放箱汇总')
      if (this.key) {
        this.open = true
      }
    },
    // 导出设置
    exportDataClickAllSetting () {
      this.allStrExt = JSON.stringify(this.allList)
      this.fieldStrExt = JSON.stringify(this.fieldListExt)
      this.getSettingListExport('出口放箱汇总导出')
      if (this.key) {
        this.openExt = true
      }
    }
  }
}
</script>

<style lang="less">
.drop-box-history {
  .chargeable_table_payable_statement_foot {
    margin-bottom: 9px;
    span {
      margin-right: 5px;
      color: blue;
    }
  }
  .el-button+.el-button {
    margin-left: 5px;
  }
  .icon {
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    cursor: pointer;
  }
  .lockColor {
    background: #f3e3e3,
  }
  .icon-locking {
  background-image: url(../../assets/locking.png)
  }
  .icon-unlock {
  background-image: url(../../assets/unlock.png)
  }
  .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
    margin-bottom: 3px !important;
  }
  .el-form--inline .el-form-item {
    margin-right: 0px !important;
  }
  .el-table td, .el-table th {
    padding: 0;
  }

.el-input__inner {
    width: 136px;
    height: 28px;
    line-height: 28px;
  }
  .pagenation {
  margin-left: 20px;
  font-size: 14px;
  input {
    width: 100px
  }
}
.oper-row {
  position: relative;
  padding: 0px 0;
  &.filter {
    .right {
      padding-left: 80px;
    }
  }
  .label {
    position: absolute;
    margin-right: 20px;
    display: inline-block;
    top: 8px;
    left: 0;
  }
  .right {
    padding-left: 30px;
    >* {
      margin-top: 5px;
    }
    span {
      cursor: pointer;
    }
  }
}
}
</style>
